<template>
  <view>
    <view class="logout">
      <view class="panel-list-item" @click="logout">
        <text class="logout-text">退出登录</text>
      </view>
    </view>
    <view class="my-top">
      <view>
        <view class="my-top-1">
          <view class="my-top-2">
            <view class="my-top-3">
              <view>
                <image :src="userinfo.imgUrl"></image>
                <button open-type="chooseAvatar" @chooseavatar="getUserImg" class="my-top-img">更新头像</button>
              </view>
            </view>
            <view><input @blur="bindblur" v-model="nicknameval" class="title" type="nickname" placeholder="请输入昵称" />
            </view>
            <view class="my-top-4" v-if="!token"><button @click="getLoginInfo">微信登录</button></view>
          </view>
        </view>
      </view>
    </view>
    <view class="my-list">
      <view>
        <view class="my-list-item" @click="gotoMyCollect">
          <view>
            <image src="/static/my/star-line.png"></image>
          </view>
          <view class="my-list-item-text">我的收藏</view>
          <view>
            <image src="/static/my/arrow-right-s-line.png"></image>
          </view>
        </view>
        <view class="my-list-item">
          <view>
            <image src="/static/my/todo-line.png"></image>
          </view>
          <view class="my-list-item-text">我的笔记</view>
          <view>
            <image src="/static/my/arrow-right-s-line.png"></image>
          </view>
        </view>
        <view class="my-list-item">
          <view>
            <image src="/static/my/share-line.png"></image>
          </view>
          <view class="my-list-item-text">分享好友</view>
          <view>
            <image src="/static/my/arrow-right-s-line.png"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  // 1. 从 vuex 中按需导入 mapState 辅助函数
  import {
    mapState,
    mapMutations,
  } from 'vuex'
  export default {
    computed: {
      // 2. 从 m_user 模块中导入需要的 token 字符串
      ...mapState('m_user', ['token', 'userinfo']),
    },
    data() {
      return {
        nicknameval: '',
      };
    },
    onLoad(options) {
      // 加载本地nickname
      var userinfo = JSON.parse(uni.getStorageSync('userinfo') || '{"imgUrl":"/static/my/user-3-line.png"}')
      this.$data.nicknameval = userinfo.nickname;
    },
    methods: {
      // 1. 使用 mapMutations 辅助方法，把 m_user 模块中的 updateToken 方法映射到当前组件中使用
      ...mapMutations('m_user', ['updateToken', 'updateImgUrl', 'updateNickName', 'updateUserInfo']),
      // 点击我的收藏
      gotoMyCollect() {
        var token = uni.getStorageSync('token');
        if (token == null || token == '') {
          // 请先登录
          uni.showToast({
            title: '请先登录',
            //将值设置为 success 或者直接不用写icon这个参数
            icon: 'success',
            //显示持续时间为 2秒
            duration: 1000
          })
          return;
        }
        // 调用API页面跳转
        uni.navigateTo({
          // 指定详情页面的 URL 地址，并传递 goods_id 参数
          url: '/pages/mycollect/mycollect'
        })
      },
      // 退出登录
      async logout() {
        // 询问用户是否退出登录
        const [err, succ] = await uni.showModal({
          title: '提示',
          content: '确认退出登录吗？'
        }).catch(err => err)

        if (succ && succ.confirm) {
          var token = uni.getStorageSync('token');
          uni.request({
            url: this.$config.baseApi + '/com/wx/authorize/logout',
            method: 'get',
            data: {},
            header: {
              token: token
            },
            success: (res) => {}
          });
          // 用户确认了退出登录的操作
          // 需要清空 vuex 中的 userinfo、token 和 address
          this.updateUserInfo({
            "imgUrl": "/static/my/user-3-line.png"
          })
          this.updateToken('')
        }
      },
      // 昵称
      bindblur(e) {
        var that = this;
        var nickname = e.target.value;
        that.nicknameval = nickname;
        // 持久化到本地
        that.updateNickName(nickname);
      },
      // 获取用户头像
      getUserImg(e) {
        var that = this;
        // 头像
        var img = e.detail.avatarUrl;
        that.updateImgUrl(img);
      },
      // 登录
      getLoginInfo() {
        var that = this;
        wx.showLoading({
          title: '登录中',
        })
        uni.login({
          "provider": "weixin",
          "onlyAuthorize": true, // 微信登录仅请求授权认证
          success: function(event) {
            const {
              code
            } = event
            //客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
            uni.request({
              url: that.$config.baseApi + '/com/wx/authorize/login', //仅为示例，并非真实接口地址。
              method: 'post',
              data: {
                code: event.code
              },
              success: (res) => {
                // 2. 更新 vuex 中的 token
                that.updateToken(res.data.skey)
                // 隐藏加载中提示
                wx.hideLoading()
                uni.showToast({
                  title: '成功提示',
                  //将值设置为 success 或者直接不用写icon这个参数
                  icon: 'success',
                  //显示持续时间为 2秒
                  duration: 2000
                })
              }
            });
          },
          fail: function(err) {
            // 登录授权失败  
            // err.code是错误码
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .my-top {
    height: 500rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2A82E4;
  }

  .my-top-1 {
    width: 200rpx;
    height: 200rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .my-top-1 image {
    display: block;
    width: 230rpx;
    height: 230rpx;
    border-radius: 50%;
  }

  .my-top-2 {
    width: 230rpx;
  }

  .my-top-3 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 230rpx;
    height: 230rpx;
    border-radius: 50%;
    background-color: #FFFFFF;
  }

  .my-top-3 view {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .my-top-4 {
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    width: 230rpx;
    margin-top: 30rpx;
  }

  .my-top-4 button {
    font-size: 28rpx;
    width: 230rpx;
    // margin-top: 30rpx;
    // color: #FFFFFF;
  }

  .my-list {
    height: 500rpx;
  }

  .my-list-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30rpx 0rpx;
    border-bottom: 2rpx solid #E5E5E5;
  }

  .my-list-item image {
    display: block;
    width: 38rpx;
    height: 38rpx;
  }

  .my-list-item-text {
    width: 80%;
    padding-left: 20rpx;
    font-size: 30rpx;
  }

  .title {
    margin-top: 30rpx;
    font-size: 30rpx;
    text-align: center;
    color: #FFFFFF;
  }

  .my-top-img {
    position: absolute;
    background: rgba(0, 0, 0, 0);
    color: rgba(0, 0, 0, 0);
  }

  button::after {
    border: none; //去除边框
  }

  .logout {
    position: absolute;
    right: 20rpx;
  }

  .logout-text {
    font-size: 28rpx;
    color: #FFFFFF;
  }
</style>